$(function(){
   // alert(11)
  fn()
   
 async function fn() {
   const {data:res} = await axios({
        url: 'http://www.liulongbin.top:3006/api/news'
    })

   //   console.log(res);
     // 渲染数据到页面中
     let htmlStr = rednerDOM(res.data);
     $("#news-list").html(htmlStr);
  }

 
  // 渲染数据到页面中
  function rednerDOM(data) {
   return data.map(item => {
       // 处理每个数据中的time时间为需要的格式
       item.time = formatTime(item.time);

       // 创建结构
       return `
           <div class="news-item">
               <img class="thumb" src="http://www.liulongbin.top:3006${item.img}" alt="">
               <div class="right-box">
                   <h1 class="title">${item.title}</h1>
                   <div class="tags">
                       ${renderTag(item.tags)}
                   </div >
                   <div class="footer">
                       <div>
                           <span>${item.source}</span>&nbsp;&nbsp;
                           <span>${item.time}</span>
                       </div>
                       <span>评论数：${item.cmtcount}</span>
                   </div>
               </div>
           </div>
       `;
   }).join("");
}


    // 补零函数
    function paddZero(n) {
         return n < 10 ? "0" + n : n;
     }

     // 处理时间
     function formatTime(time) {
         let d = new Date(time);

         // 处理时间格式
         let year = paddZero(d.getFullYear());
         let month = paddZero(d.getMonth() + 1);
         let day = paddZero(d.getDate());
         let h = paddZero(d.getHours());
         let m = paddZero(d.getMinutes());
         let s = paddZero(d.getSeconds());

         // 返回时间
         return `${year}-${month}-${day} ${h}:${m}:${s}`;
     }

     // 处理tag
     function renderTag(tags) {
         return tags.split(",").map(tag => `<span>${tag}</span>`).join("");
     }

})